<template>
	<view class="upload">
		<view class="list">
			<view class="item interval" v-for="(item,index) in fileList" :key="index">
				<image :src="item" v-if="item" mode="aspectFill"></image>
				<view class="icon-close" @click.stop="handleRemove(index)">
					<image src="/static/close1.png" mode="widthFix" class="icon"></image>
				</view>
			</view>
			<view class="item" @click="openAuth" v-if="fileList.length<limit">
				<image src="/static/up.png" mode="widthFix"></image>
			</view>
		</view>
		<yk-authpup ref="authpup" type="top" @changeAuth="show = true" :permissionID="permissionID"></yk-authpup>
		<u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
	</view>
</template>

<script>
	import http from '@/config/config.js';
	import config from '@/common/config.js';
	function getUrl(obj){
		let newObj = {...obj,...http.commonObj};
		let queryString = Object.keys(newObj).map(key => key + '=' + newObj[key]).join('&');
		let url = '/front.php?' + queryString;
		return url
	};
	export default {
		props: {
			addImg: {
				type: String,
				default: ''
			},
			is_thum: {
				type: Number,
				default: 0
			},
			project: {
				type: String,
				default: 'imagesupload'
			},
			limit: {
				type: Number,
				default: 9
			},
			url: {
				type: String,
				required: true
			},
			name: {
				type: String,
				default: 'file'
			},
			token: {
				type: String,
				default: ''
			},
			formData: {
				type: Object,
				default () {
					return {}
				}
			},
			header: {
				type: Object,
				default () {
					return {}
				}
			},
			fileList: {
				type: Array,
				default () {
					return []
				}
			}
		},
		onLoad() {},
		data() {
			return {
				
				permissionID: 'READ_EXTERNAL_STORAGE',
				list: [{
					text: '拍摄',
					value:'camera',
				}, {
					text: '从相册选择',
					value:'album',
				}],
				show: false,
			}
		},
		methods: {
			click(index) {
				console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
				if(index == 0){
					this.permissionID = 'CAMERA';
					this.$refs['authpup'].open('CAMERA');
				}else if (index == 1){
					this.permissionID = 'READ_EXTERNAL_STORAGE';
					this.$refs['authpup'].open('READ_EXTERNAL_STORAGE');
				};
				this.chooseImage(this.list[index].value);
			},
			openAuth(){
				this.$refs['authpup'].open() //调起自定义权限目的弹框,具体可看示例里面很详细
			},
			async chooseImage(value) {
				let that = this;
				// // #ifdef APP
				// 	let result = await this.$store.dispatch('permission/requestPermissions','READ_EXTERNAL_STORAGE');
				// 	if(result !== 1) return
				// // #endif
				const key = uni.getStorageSync('token');
				let obj = {
					g: 'shop',
					c: 'user',
					a: 's_up_img_update',
					key: key || ''
				};
				let url =  http.baseUrl + getUrl(obj);
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: [value], // 可以指定来源是相册还是相机，默认二者都有
					success: (chooseImageRes) => {
						let uploadTask;
						chooseImageRes.tempFilePaths.forEach(el=>{
							uploadTask = uni.uploadFile({
								url,
								filePath: el,
								name: 'file',
								formData: {
									name:'file',
								},
								// header: this.header,
								success: (uploadFileRes) => {
									this.$emit('on-success', JSON.parse(uploadFileRes.data))
								},
								fail: (err) => {
									this.$emit('on-error', err)
								}
							})
							uploadTask.onProgressUpdate((res) => {
								this.$emit('on-process', res)
							})
						})
					}
				})
			},
			handleRemove(index) {
				this.$emit('on-remove', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload {
		margin-top: 30upx;

		.list {
			display: flex;
			flex-wrap: wrap;

			.item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 140rpx;
				height: 140rpx;
				margin-right: 11rpx;
				border-radius: 16rpx;
				margin-bottom: 20upx;

				&.interval {
					margin-right: 16upx;
					border: none;
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 8upx;
					margin: 0;
				}

				.icon-close {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					width: 48upx;
					height: 48upx;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
				}

				.icon {
					width: 48upx;
					height: 48upx;
					border-radius: 50%;
					box-shadow: 0 5rpx 10rpx rgba(46, 130, 255, .2);
				}
			}
		}
	}
</style>